<template>
    <div class="white-box">
        <title-more title="数据概览">
            <template #sub>
                <el-popover placement="right-start" title="" :width="700" trigger="hover">
                    <template #reference>
                        <el-icon color="#C1C1C1" :size="18"><QuestionFilled /></el-icon>
                    </template>
                    <template #default>
                        <p class="p-popover">注：实时数据仅供即时运营参考，最终以离线数据为准。</p>
                        <p class="p-popover">累计粉丝：统计周期内，店铺所有的会员数</p>
                        <p class="p-popover">成交客户：统计周期内，有下单且成功付款的用户数量</p>
                        <p class="p-popover">储值会员数：统计周期内，有充值订单的会员数</p>
                        <p class="p-popover">代理商数量：统计周期内，店铺所有的代理商用户数</p>
                    </template>
                </el-popover>
            </template>
        </title-more>
        <div class="data-prev flexs">
            <div class="data-prev__item">
                <div class="data-prev__tip">累计粉丝</div>
                <p class="data-prev__nums">{{ objs.total_fans || "0" }}</p>
            </div>
            <div class="data-prev__item">
                <div class="data-prev__tip">成交客户</div>
                <p class="data-prev__nums">{{ objs.deal_user || "0" }}</p>
            </div>
            <div class="data-prev__item">
                <div class="data-prev__tip">储值会员数</div>
                <p class="data-prev__nums">{{ objs.recharge_user || "0" }}</p>
            </div>
            <div class="data-prev__item">
                <div class="data-prev__tip">代理商数量</div>
                <p class="data-prev__nums">{{ objs.agent_nums || "0" }}</p>
            </div>
        </div>
    </div>

    <!-- 新老客户 -->
    <div class="white-box">
        <title-more title="新老客户分析"></title-more>
        <div class="echars-one__cont">
            <div id="echart-user" class="echart-view"></div>
        </div>
    </div>

    <!-- 新老成交客户 -->
    <div class="white-box">
        <title-more title="新老成交客户分析"></title-more>
        <div class="echars-one__cont">
            <div id="echart-deal" class="echart-view"></div>
        </div>
    </div>

    <!-- 客户复购率 -->
    <div class="white-box">
        <title-more title="客户复购率"></title-more>
        <div class="echars-one__cont">
            <div id="echart-rate" class="echart-view"></div>
        </div>
    </div>

    <!-- 推荐会员数排行榜 -->
    <div class="white-box">
        <title-more title="推荐会员数排行榜"></title-more>
        <el-table
            class="table-mb"
            v-loading="loading"
            :data="arr_data"
            :header-cell-style="{ background: '#F5F7FA' }"
            element-loading-background="rgba(255, 255, 255, 0.6)"
        >
            <el-table-column label="排名" type="index" :index="indexMethod" width="120" />
            <el-table-column label="会员信息">
                <template #default="{ row }">
                    <div class="table-lr">
                        <el-image
                            class="table-lr__img img-round img-small"
                            loading="lazy"
                            :src="proxy.imgUrl + row.face + '!img_400'"
                            fit="cover"
                            v-if="row.face"
                        />
                        <div class="table-lr__right small-right">
                            <p class="lr-title">{{ row.name }}</p>
                            <p class="lr-text">UID：{{ row.uid }}</p>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="invite_num" label="推荐会员数" />
            <el-table-column prop="total_pay" label="总消费" />
            <el-table-column prop="orders" label="订单数" />
            <el-table-column prop="created_at_label" label="创建时间" />
        </el-table>
        <el-pagination
            background
            v-model:current-page="page"
            v-model:page-size="pageSize"
            :page-sizes="pageSizeNum"
            :total="totalNums"
            layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
    </div>
    <go-back />
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, watch, onBeforeUnmount } from "vue"
import { QuestionFilled } from "@element-plus/icons-vue"
import TitleMore from "@components/title-more.vue"
import GoBack from "@components/GoBack.vue"
import OneLoad from "@mixins/one-load"
// echarts
import EchartsLine from "@common/echarts-line"
import EchartsBar from "@common/echarts-bar"

const { proxy } = getCurrentInstance()

onMounted(() => {
    getDataInfo()
    window.onresize = echartResize
})

onBeforeUnmount(() => {
    echartsDispose()
    window.onresize = null
})

// 概况
const objs = ref({
    total_fans: 0, // 累计粉丝
    deal_user: 0, // 成交客户
    recharge_user: 0, // 储值会员数
    agent_nums: 0, // 代理商数量
})
function getDataInfo() {
    proxy.$axios
        .get("analyse/user/tongji")
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                objs.value.total_fans = result.user_total_count
                objs.value.deal_user = result.user_pay_count
                objs.value.recharge_user = result.user_recharge_count
                objs.value.agent_nums = result.user_agent_count
                userEchart()
                getList()
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}

/**
 * 图表
 * @param {Object} echart_user 新老客户
 * @param {Object} echart_deal_user 新老成交客户
 * @param {Object} echart_rate 客户复购率
 */
let echart_user = null
let echart_deal_user = null
let echart_rate = null
function echartResize() {
    echart_user.resize()
    echart_deal_user.resize()
    echart_rate.resize()
}
function echartsDispose() {
    echart_user != null && echart_user.dispose()
    echart_deal_user != null && echart_deal_user.dispose()
    echart_rate != null && echart_rate.dispose()
    echart_user = null
    echart_deal_user = null
    echart_rate = null
}

// 新老客户
function userEchart() {
    echart_user = proxy.$echarts.init(document.getElementById("echart-user"))
    let new_user = [],
        old_user = [],
        xData = []
    proxy.$axios
        .get("analyse/user/member")
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data.user_items
                result.map((item) => {
                    new_user.push(item.user_num)
                    old_user.push(item.total_num)
                    xData.push(item.date)
                })
                let series = [
                    {
                        data: new_user,
                        type: "line",
                        name: "新客户",
                        smooth: true,
                        showSymbol: false,
                    },
                    {
                        data: old_user,
                        type: "line",
                        name: "老客户",
                        smooth: true,
                        showSymbol: false,
                    },
                ]
                let legend = ["新客户", "老客户"]
                let option = EchartsLine(xData, legend, series)
                echart_user.setOption(option)
                userDealEchart()
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}
// 新老成交客户
function userDealEchart() {
    echart_deal_user = proxy.$echarts.init(document.getElementById("echart-deal"))
    let new_user = [],
        old_user = [],
        xData = []
    proxy.$axios
        .get("analyse/user/trade")
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data.user_items
                result.map((item) => {
                    new_user.push(item.new_num)
                    old_user.push(item.total_num)
                    xData.push(item.date)
                })
                let series = [
                    {
                        data: new_user,
                        type: "line",
                        name: "新成交客户",
                        smooth: true,
                        showSymbol: false,
                    },
                    {
                        data: old_user,
                        type: "line",
                        name: "老成交客户",
                        smooth: true,
                        showSymbol: false,
                    },
                ]
                let legend = ["新成交客户", "老成交客户"]
                let option = EchartsLine(xData, legend, series)
                echart_deal_user.setOption(option)

                rateEchart()
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}

// 客户复购率-柱状图
function rateEchart() {
    echart_rate = proxy.$echarts.init(document.getElementById("echart-rate"))
    let buy_rate = [],
        xData = []
    proxy.$axios
        .get("analyse/user/repurchase")
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data.user_items
                result.map((item) => {
                    let rates = item.month_count > 0 ? ((item.month_count / item.last_count) * 100).toFixed(2) : 0
                    buy_rate.push(rates)
                    xData.push(item.month)
                })
                let series = [
                    {
                        data: buy_rate,
                        type: "bar",
                        barWidth: "40%",
                        name: "客户复购率",
                    },
                ]
                let option = EchartsBar(xData, series, "{b}<br />{a}：{c}%")
                echart_rate.setOption(option)
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}

/**
 * minxin列表加载
 */
const { page, pageSizeNum, pageSize, loading, arr_data, totalNums, pubParams, getdata } = OneLoad()

// 切换每页显示条数
watch(pageSize, (val) => {
    page.value = 1
    pubParams(getList)
})
// 跳转第几页
watch(page, (val) => {
    pubParams(getList)
})

const indexMethod = (index) => {
    return index + 1 + (page.value - 1) * pageSize.value
}
function getList() {
    let params = {
        page: page.value,
        limit: pageSize.value,
    }
    getdata("analyse/user/rank", params)
}
</script>
<script>
export default {
    name: "UserAnalytics",
}
</script>

<style lang="less" scoped>
.echart-view {
    width: 100%;
    height: 340px;
}
.p-popover {
    font-size: @font-size-md;
    color: #595961;
    margin: @margin-xs 0px;
}
.data-prev {
    .data-prev__item {
        width: 24%;
        padding: @padding-mdl;
        overflow: hidden;
        border-radius: 10px;
        .data-prev__tip {
            margin-bottom: @margin-md;
            color: @gray-6;
        }
        .data-prev__nums {
            font-size: 26px;
            color: #111;
        }
        &:hover {
            background-color: #f4f8ff;
        }
        .data-prev__ratio {
            margin-top: @margin-base;
            color: @gray-6;
            .ratio-nums {
                color: @red;
                margin-left: -6px;
            }
        }
    }
}
</style>
